<template>
	<view class="poster-box" :style="{ backgroundImage: 'url('+(backgroundImage || basketball)+')' }">
		<div class="content" :style="{ backgroundImage: 'url('+contentBg+')' }">
			<div class="content_item">
				<div class="title">{{info.title}}</div>
				<div v-if="Object.keys(info.match_info_obj).length" class="time-money Grid Grid--justifyCenter Grid--center">
					<div>{{info.match_info_obj.competition_info.name}} {{info.match_info_obj.match_time.slice(5, 16)}}</div>
				</div>
				<div v-if="Object.keys(info.match_info_obj).length" class="name Grid Grid--center Grid--justifyCenter">
					<span>{{info.match_info_obj.home_team_info.team_name}}</span>
					<img style="width: 27px;height: 27px;padding: 0 6px" src="@/static/images/poster/vs.png" alt="">
					<span>{{info.match_info_obj.away_team_info.team_name}}</span>
				</div>
				<div class="name Grid Grid--center Grid--justifyCenter" v-else>
					<span>{{info.match_nick}}</span>
				</div>
				<div class="sale_info Grid Grid--center">
					<image class="tx_img" :src="info.avatar_url_base64"></image>
					<div>{{info.author.nickname}}</div>
				</div>
				<div style="color: #D54941;font-size: 20px;text-align: left;margin: 12px 0px 6px;">{{info.price * 1 ? info.price : '免费'}} <text v-if="info.price * 1">元</text></div>
				<div class="hint">扫码查看文章详情</div>
				<div style="position: absolute;right: 25px;bottom: 26px;">
					<slot></slot>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import basketball from '@/static/images/poster/basketball-bg1-5.png'
	import contentBg from '@/static/images/poster/content-bg.png'
	export default {
		name: "temp-basketball-1",
		props: {
			info: {
				type: Object,
				default: () => ({})
			},
			backgroundImage: {
				type: String,
				default: ''
			}
		},
		data () {
			return {
				basketball,//篮球背景图
				contentBg,
			}
		},
		computed: {
			
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.poster-box {
		width: 375px;
		height: 552px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 18px 14px;
		.content{
			width: 346px;
			// height: 318px;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: relative;
			.content_item{
				padding: 0 14px;
				.title{
					color: #222222;
					line-height: 22px;
					padding-top: 23px;
					text-align: center;
					font-size: 16px;
					font-weight: 600;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
				}
				.time-money{
					margin-top: 24px;
				}
				.name{
					font-size: 14px;
					color: #C52929;
					text-align: left;
					margin: 2px 0;
					span{
						font-weight: 600;
					}
				}
				.sale_info{
					margin-top: 20px;
					&>div{
						font-size: 20px;
					}
					.tx_img{
						height: 40px;
						width: 40px;
						border-radius: 100%;
						margin-right: 6px;
						::v-deep .el-image__inner{
							object-fit: cover;
						}
					}
				}
				.hint{
					text-align: left;
					color: #222222;
					padding-bottom: 29px;
				}
			}
		}
	}
</style>